<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		.outer_box {
			width: 930px;
			height: 343px;
			/* border: 1px solid red; */
		}
		.outer_box .inner_box {
			width: 220px;
			height: 166px;
			float: left;
			border: 1px solid green;
			margin-right: 10px;
			margin-bottom: 5px;
			position: relative;
			/* 父元素决定子元素内容居中 */
			text-align: center;
		}
		.inner_box .hot {
			width: 39px;
			height: 28px;
			background: url('./images/un_sprite_tag.png') no-repeat;
			/* 子元素绝对定位，父元素则要相对定位 */
			position: absolute;
			top: 0px;
			left: 10px;
		}
		.hot text {
			font-size: 11px;
			color: #ffffff;
		}

		.inner_box .inser_pic {
			width: 100%;
		}

		.inner_box .mess {
			width: 100%;
			height: 25px;
			background-color: rgba(91, 99, 105, 0.5);
			position: absolute;
			/* 要基于父元素的下底固定，而不是上底，不然hover方向不对 */
			bottom: 44px;
			transition: 1s;
			/* 文本超出的内容进行隐藏，当高度被修改后，就不会被隐藏了 */
			overflow: hidden;
		}

		/* 要选择父容器hover，之后就找到儿子mess，修改高度即可 */
		.inner_box:hover .mess {
			height: 124px;
		}

		.mess text {
			font-size: 11px;
			color: #fff;
		}

		.inner_box .title {
			font-size: 11px;
			color: #666;
		}

		.inner_box .buy {
			margin-left: 3px;
		}

		.buy .sit {
			font-size: 11px;
			color: #b2a5c2;
			/* 用了浮动，最好就不要用flex布局，会失效的 */
			float: left;
		}

		.buy .price {
			float: right;
		}

		.price .money {
			font-size: 16px;
			color: #ff6600;
		}
	</style>
	<body>
		<div class="outer_box">
			<div class="inner_box">
				<div class="hot"><text>特卖</text></div>
				<img src="./images/1.jpg" class="inser_pic" />
				<div class="mess">
					<text>只卖3天,套餐卖介个等于外网一间房子的ssssss</text>
				</div>
				<div class="title">无锡2日1晚自由行(5钻)·【5.23-2.25抢...</div>
				<div class="buy">
					<div class="sit">席位充足</div>
					<div class="price">
						<sup>&yen;</sup>
						<!-- span是块内元素则不用flex布局 -->
						<span class="money">250</span>
						起
					</div>
				</div>
			</div>
			<div class="inner_box"></div>
			<div class="inner_box"></div>
			<div class="inner_box"></div>
			<div class="inner_box"></div>
			<div class="inner_box"></div>
			<div class="inner_box"></div>
			<div class="inner_box"></div>
		</div>
	</body>
</html>
